<!--
 * @Description: 工单打印模板
 * @Autor: 何兴家
 * @Date: 2021-02-01 16:17:31
 * @LastEditors: 马毅
 * @LastEditTime: 2021-10-21 22:01:15
-->
<template>
  <div ref="print" style="width:100%; margin: 0 auto;" v-show="isPreview">
    <div style="padding: 15px">
      <!-- 工单信息 -->
      <table class="bor">
        <tr>
          <td>经销商代码：</td>
          <td>{{ data.OWNER_CODE }}</td>
          <td>维修委托书编号：</td>
          <td>{{ data.RO_NO }}</td>
          <td>打印日期/时间：</td>
          <td>{{ nowTime }}</td>
        </tr>
      </table>

      <!-- 车主车辆及维修信息 -->
      <table class="bor">
        <tr>
          <td rowspan="3" style="width: 60px">车主信息</td>
          <td>车主姓名</td>
          <td>{{ data.OWNER_NAME }}</td>
          <td>车主手机</td>
          <td>{{ data.MOBILE }}</td>
          <td>车主电话</td>
          <td>{{ data.PHONE }}</td>
        </tr>
        <tr>
          <td>邮编</td>
          <td>{{ data.ZIP_CODE }}</td>
          <td>地址</td>
          <td colspan="3">{{ data.ADDRESS }}</td>
        </tr>
        <tr>
          <td>送修人姓名</td>
          <td>{{ data.DELIVERER }}</td>
          <td>送修人电话</td>
          <td>{{ data.DELIVERER_MOBILE }}</td>
          <td>是否预约</td>
          <td>
            <template v-if="data.IS_BOOK == 10041001"> <input type="checkbox" checked />是 <input type="checkbox" />否 </template>
            <template v-else> <input type="checkbox" />是 <input type="checkbox" checked />否 </template>
          </td>
        </tr>
        <tr>
          <td rowspan="3" style="width: 60px">车辆信息</td>
          <td>车牌照号</td>
          <td>{{ data.LICENSE }}</td>
          <td>品牌</td>
          <td>{{ data.BRAND_NAME }}</td>
          <td>车型</td>
          <td>{{ data.MODEL_NAME }}</td>
        </tr>
        <tr>
          <td>发动机号</td>
          <td>{{ data.ENGINE_NO }}</td>
          <td>VIN</td>
          <td colspan="3">{{ data.VIN }}</td>
        </tr>
        <tr>
          <td>保修起始日期</td>
          <td>{{ data.WRT_BEGIN_DATE }}</td>
          <td>里程数</td>
          <td>{{ data.IN_MILEAGE }}</td>
          <td>颜色</td>
          <td>{{ data.COLOR_NAME }}</td>
        </tr>
        <tr>
          <td rowspan="2" style="width: 60px">维修信息</td>
          <td>工单类型</td>
          <td>{{ data.REPAIR_TYPE_NAME }}</td>
          <td>开单日期/时间</td>
          <td colspan="3">{{ data.RO_CREATE_DATE }}</td>
        </tr>
        <tr>
          <td>维修类别</td>
          <td>{{ data.RO_TYPE }}</td>
          <td>预计交车日期/时间</td>
          <td colspan="3">{{ data.END_TIME_SUPPOSED }}</td>
        </tr>
      </table>

      <!-- 用户描述 -->
      <!-- <table class="bor">
        <tr>
          <td style="width: 60px">客户陈述</td>
          <td>{{ data.CUSTOMER_DESC }}</td>
        </tr>
        <tr>
          <td style="width: 60px">维修指示</td>
          <td>{{ data.RO_TROUBLE_DESC }}</td>
        </tr>
      </table> -->

      <!-- 项目配件 -->
      <p style="margin-center: 20px"></p>
      <table class="bor fs12">
        <tr>
          <td align="center" style="width: 60px">序号</td>
          <td align="center">客户车辆故障描述</td>
          <td align="center">维修操作内容</td>
          <td align="center">工时费</td>
          <td align="center">所需配件</td>
          <td align="center">配件费用</td>
          <td align="center">质检标识</td>
        </tr>
        <tr v-for="(item, index) in data.labourList" :key="`labour-${index}`" :style="{ ...styles.tableRow }">
          <td align="center">{{ index + 1 }}</td>
          <td>{{ data.CUSTOMER_DESC }}</td>
          <td>{{ item.LABOUR_NAME }}</td>
          <td>{{ item.REAL_AMOUNT }}</td>
          <td>
            <span style="display: block" v-for="(partItem, index) in item.partList" :key="index">{{ partItem.PART_NAME }}</span>
          </td>
          <td>{{ item.partList ? calcPartAmount(item.partList) : '' }}</td>
          <td></td>
        </tr>
      </table>

      <p style="margin-center: 20px"></p>
      <!-- 维修保养变更项目 -->
      <table class="bor fs12">
        <tr>
          <td align="center" colspan="4">维修保养变更项目</td>
        </tr>
        <tr>
          <td align="center" style="width: 60px">序号</td>
          <td align="center">建议客户维修保养的项目</td>
          <td align="center">客户是否接受</td>
          <td align="center">客户签名</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td><input type="checkbox" />接受 <input type="checkbox" />不接受</td>
          <td></td>
        </tr>
      </table>

      <!-- 费用 -->
      <!-- <table class="bor">
        <tr>
          <td colspan="6">估算费用</td>
        </tr>
        <tr>
          <td style="width: 74px">工时费</td>
          <td>{{ realLabourAmount }}</td>
          <td style="width: 74px">维修材料费</td>
          <td>{{ realPartAmount }}</td>
          <td style="width: 74px">合计金额</td>
          <td>{{ realLabourAmount + realPartAmount }}</td>
        </tr>
      </table> -->

      <!-- 提示信息等 -->
      <table class="bor">
        <tr>
          <td colspan="2">
            客户维修等待：<input type="checkbox" />留店 <input type="checkbox" />离店<span style="display: inline-block; margin:0 10px"></span> 是否保留旧件：<input type="checkbox" />保留
            <input type="checkbox" />不保留<span style="display: inline-block; margin:0 10px"></span> 是否有贵重物品<input type="checkbox" />有 <input type="checkbox" />无
          </td>
        </tr>
        <tr>
          <td style="width: 60px">特别提醒</td>
          <td>
            本人同意以上检查或维修保养的服务项目以及预估费用，取车时按照实际结算付款；若不进行后续维修，愿意支付因检查、诊断产生的工时费；车内已无现金及贵重物品；如因不可抗力导致的意外损失、贵公司不需要负责，同意授权该店因维修诊断需要进行的路试。
            <div style="display: flex; justify-content: flex-end;">
              <p style="margin-left: 40px">服务顾问：___________</p>
              <p style="margin-right: 40px">客户：___________</p>
            </div>
          </td>
        </tr>
      </table>

      <!-- 维修签字 -->
      <table class="bor">
        <tr>
          <td colspan="11" align="center">经销商内部作业管控（时间与质量管控）</td>
        </tr>
        <tr align="center">
          <td colspan="2" rowspan="2"></td>
          <td>车间主管</td>
          <td colspan="4" align="center">维修技师</td>
          <td>质检员</td>
          <td>洗车工</td>
          <td>质检员/服务顾问</td>
          <td>服务顾问</td>
        </tr>
        <tr>
          <td>维修接单</td>
          <td>工种(序1)</td>
          <td>工种(序2)</td>
          <td>工种(序3)</td>
          <td>工种(序4)</td>
          <td>终检</td>
          <td>清洁车辆</td>
          <td>车间交车</td>
          <td>最终交付</td>
        </tr>
        <tr>
          <td rowspan="2">时间</td>
          <td>起</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>止</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">签名确认</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>

      <table>
        <tr>
          <td style="width: 33%">特约店名称：{{ data.dealerName }}</td>
          <td style="width: 33%">地址：{{ data.serviceAddress }}</td>
          <td style="width: 33%">24小时服务热线：{{ data.hotLine }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  props: {
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      styles: {
        tableRow: {
          minHeight: '16px'
        }
      }
    };
  },
  computed: {
    // 维修项目预估
    realLabourAmount() {
      return this.data.labourList.reduce((item, next) => {
        item += next.REAL_AMOUNT;
        return item;
      }, 0);
    },
    // 维修配件预估
    realPartAmount() {
      return this.data.partList.reduce((item, next) => {
        item += next.REAL_AMOUNT;
        return item;
      }, 0);
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    },
    calcPartAmount(list = []) {
      return list.reduce((item, next) => {
        return item + next.REAL_AMOUNT;
      }, 0);
    }
  },
  mounted() {
    this.$emit('onPrintTable', this.$refs.print.innerHTML);
    if (this.isPreview) {
      this.fillInToDom();
    }
  }
};
</script>
